<html>
<head>
   <title>Test Emil Form</title>
   <script type="text/javascript">
   $(document).ready(function() {
       $("#submit_btn").click(function() { 
           //get input field values
           var user_name       = $('input[name=name]').val(); 
           var user_email      = $('input[name=email]').val();
           var user_phone      = $('input[name=phone]').val();
           var user_message    = $('textarea[name=message]').val();
           
           //simple validation at client's end
           //we simply change border color to red if empty field using .css()
           var proceed = true;
           if(user_name==""){ 
               $('input[name=name]').css('border-color','red'); 
               proceed = false;
           }
           if(user_email==""){ 
               $('input[name=email]').css('border-color','red'); 
               proceed = false;
           }
           if(user_phone=="") {    
               $('input[name=phone]').css('border-color','red'); 
               proceed = false;
           }
           if(user_message=="") {  
               $('textarea[name=message]').css('border-color','red'); 
               proceed = false;
           }
   
           //everything looks good! proceed...
           if(proceed) 
           {
               //data to be sent to server
               post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userMessage':user_message};
               
               //Ajax post data to server
               $.post('contact_me.php', post_data, function(response){  
                   
                   //load json data from server and output message     
                   if(response.type == 'error')
                   {
                       output = '<div class="error">'+response.text+'</div>';
                   }else{
                   
                       output = '<div class="success">'+response.text+'</div>';
                       
                       //reset values in all input fields
                       $('#contact_form input').val(''); 
                       $('#contact_form textarea').val(''); 
                   }
                   
                   $("#result").hide().html(output).slideDown();
               }, 'json');
               
           }
       });
       
       //reset previously set border colors and hide all message on .keyup()
       $("#contact_form input, #contact_form textarea").keyup(function() { 
           $("#contact_form input, #contact_form textarea").css('border-color',''); 
           $("#result").slideUp();
       });
       
   });
   </script>
</head>   
<body>
<fieldset id="contact_form">
<legend>My Contact Form</legend>
<div id="result"></div>
    <label for="name"><span>Name</span>
    <input type="text" name="name" id="name" placeholder="Enter Your Name" />
    </label>
    
    <label for="email"><span>Email Address</span>
    <input type="email" name="email" id="email" placeholder="Enter Your Email" />
    </label>
    
    <label for="phone"><span>Phone</span>
    <input type="text" name="phone" id="phone" placeholder="Phone Number" />
    </label>
    
    <label for="message"><span>Message</span>
    <textarea name="message" id="message" placeholder="Enter Your Name"></textarea>
    </label>
    
    <label><span>&nbsp;</span>
    <button class="submit_btn" id="submit_btn">Submit</button>
    </label>
</fieldset>
</body>
</html>
